<template>
  <div class="container">
      <div class="card">
          <el-breadcrumb separator="/" class="card-body">
              <el-breadcrumb-item :to="{ path: '/AdminHome' }"><i class="el-icon-location"></i>首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="card clearfix">
          <div class="classfy-tree" :style="{ minHeight: cardBodyHeight + 'px' }">
              <div class="card-header">
                  资产分类 :
                  <div class="f-right">
                      <el-button type="text" icon="el-icon-plus" @click="createClassification">添加</el-button>
                  </div>
              </div>
              <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </div>
          <div class="classfy-data class-wrap" ref="tabBody">
              <div class="card-header">
                  <h2 class="e_inner_text">
                    {{ className }}
                  <div class="f-right header-console">
                    <el-button @click="updateClassification(classId)" type="text" size="small">修改</el-button>
                    <span>|</span>
                    <el-button @click="attribute(classId)" type="text" size="small">属性列表</el-button>
                  </div>                  
                  </h2>
              </div>
              <el-table stripe :data="tableData" v-loading="isLoading">
                  <el-table-column fixed prop="id" label="ID" width="150">
                  </el-table-column>
                  <el-table-column prop="label" label="名称">
                  </el-table-column>
                  <el-table-column prop="code" label="分类编号">
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="250">
                      <template slot-scope="scope">
                        <el-button @click="updateClassification(scope.row.id)" size="small">修改</el-button>
                        <el-button @click="attribute(scope.row.id)" size="small">属性列表</el-button>
                        <el-button @click="delteAsset(scope.row.id)" size="small">删除</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <div class="page-wrap" v-if="pagesTotal>10">
                  <el-pagination background @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagesTotal">
                  </el-pagination>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "Classification",
  data() {
    return {
      className: "",
      classId: "",
      isLoading: false,

      pageSize: 10,
      pagesTotal: 0,
      currentPage: 1,

      tableData: "",
      treeData: "",

      defaultProps: {
        value: "id",
      }
    };
  },
  methods: {
    updateClassification(id) {
      this.$router.push({
        path: "/SystemSetting/Classification/update" + "?id=" + id
      });
    },
    createClassification(id) {
      this.$router.push({
        path: "/SystemSetting/Classification/create"
      });
    },
    delteAsset(id) {
      this.$confirm("确认删除这个分类？")
        .then(_ => {
          request({
            method: "get",
            url: this.$api.deletSort + `?id=${id}`
          }).then(res => {
            //刷新页面
            this.getTreeData();
          });
        })
        .catch(_ => {});
    },
    handleNodeClick(data) {
      //通过ID刷新右边分类数据
      let limit = this.pageSize;
      let id = data.id;
      let offset = 1;
      this.className = data.label;
      this.classId = data.id;
      this.getClassList(limit, id, offset);
    },
    attribute(id) {
      console.log("属性列表添加");
      this.$router.push({
        path: "/SystemSetting/Classification/AttriBute" + "?id=" + id
      });
    },
    getTreeData() {
      //获取树数据并渲染到页面
      request({
        url: this.$api.queryAllSort,
        method: "get"
      }).then(res => {
        this.treeData = res.data;
        this.className = this.treeData[0].label + this.treeData[0].id;
        this.classId = this.treeData[0].id;
        this.getClassList(10, this.treeData[0].id, 1);
      });
    },
    getClassList(limit = 10, id = "", offset = 1) {
      this.isLoading = true;
      //获取分类列表 默认 每页10条 第1页
      request({
        url:
          this.$api.querySortForPage +
          `?limit=${limit}&id=${id}&offset=${offset}`,
        method: "get"
      }).then(res => {
        this.tableData = res.data.list;
        this.pagesTotal = res.data.total;
        this.pageSize = res.data.pageSize;
        this.isLoading = false;
      });
    },
    sizeChange(pageSize) {
      let offset = this.currentPage;
      let limit = (this.pageSize = pageSize);
      let id = this.classId;
      this.getClassList(limit, id, offset);
    },
    currentChange(currentPage) {
      let offset = currentPage;
      let limit = this.pageSize;
      let id = this.classId;
      this.getClassList(limit, id, offset);
    }
  },
  mounted() {
    //初始化
    this.getTreeData();
  },
  computed: {
    cardBodyHeight: function() {
      let boxHeight = window.innerHeight - 149;
      return boxHeight;
    }
  }
};
</script>

<style lang="less" scoped>
.classfy-tree {
  width: 220px;
  float: left;
  position: relative;
  z-index: 1;
  background: #f9fafc;
  border-right: 1px solid #ebeef5;
  .card-header {
    border-bottom: 1px solid #e4e6e9;
  }
  .el-tree {
    padding: 10px;
    background: transparent !important;
  }
}

.classfy-data {
  padding-left: 221px;
  position: relative;
  z-index: 0;
  .card-header {
    line-height: 51px;
    height: 54px;
  }
  .e_inner_text {
    color: #000;
    font-size: 18px;
    line-height: 54px;
  }
}

.header-console{
  span{
    font-size: 12px;
    color: #375686;
  }
}

</style>